<template>
  <div class="page">
    <h1>挑战</h1>
    <dl class="list" v-for="(item, i) in list" :key="i">
      <h2 class="title">{{ item.title }}</h2>
      <dd class="item">
        <router-link :to="iten.url" v-for="(iten, j) in item.itemData" :key="j">{{ iten.name }}</router-link>
      </dd>
    </dl>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface ItemData {
  name: string,
  url: string
}

interface ListData {
  title: string
  itemData: ItemData[]
}

const list = ref<ListData[]>([
  {
    title: '热身',
    itemData: [
      {
        name: '你好',
        url: '/warmUp/hello'
      }
    ]
  },
  {
    title: '简单',
    itemData: [
      {
        name: '生命周期钩子',
        url: '/simple/lifeCycle'
      },
      {
        name: '下一次DOM更新',
        url: '/simple/nextUpdateDom'
      },
      {
        name: 'DOM传送门',
        url: '/simple/domTeleport'
      },
      {
        name: '动态CSS',
        url: '/simple/dynamicsCss'
      },
      {
        name: 'ref 全家桶',
        url: '/simple/refFamilyBucket'
      },
      {
        name: '阻止事件冒泡',
        url: '/simple/stopPropagation'
      },
      {
        name: '响应性丟失',
        url: '/simple/proxy-lose'
      },
      {
        name: '大写',
        url: '/simple/capitalize'
      },
      {
        name: 'Prop验证',
        url: '/simple/prop-verify'
      },
      {
        name: '可写的计算属性',
        url: '/simple/enwrite-computed'
      },
      {
        name: 'watch 全家桶',
        url: '/simple/watch-family'
      },
      {
        name: '浅层 ref',
        url: '/simple/shallow-ref'
      }
    ]
  },
  {
    title: '中等',
    itemData: [
      {
        name: '优化性能的指令',
        url: '/medium/directives-increment'
      },
      {
        name: '切换器',
        url: '/medium/changer'
      },
      {
        name: 'until',
        url: '/medium/async'
      },
      {
        name: '计数器',
        url: '/medium/counter'
      },
      {
        name: '实现本地存储函数',
        url: '/medium/localStorage'
      },
      {
        name: '切换焦点指令',
        url: '/medium/custom-directive'
      },
      {
        name: '防抖点击指令',
        url: '/medium/debouce'
      },
      {
        name: '函数式组件',
        url: '/medium/fun-component'
      },
      {
        name: '渲染函数[h()]',
        url: '/medium/h-components'
      },
      {
        name: '按键修饰符',
        url: '/medium/fun-modifier'
      },
      {
        name: '鼠标坐标',
        url: '/medium/mouse-location'
      },
      {
        name: '全局CSS',
        url: '/medium/global-css'
      },
      {
        name: '原始值 API',
        url: '/medium/raw-value'
      },
      {
        name: 'Effect作用域 API',
        url: '/medium/effect-scope-api'
      }
    ]
  },
  {
    title: '困难',
    itemData: [
      {
        name: '树组件 ',
        url: '/difficulty/tree-components'
      },
      {
        name: '自定义元素',
        url: '/difficulty/custom-components'
      },
      {
        name: '自定义ref',
        url: '/difficulty/custom-ref'
      },
      {
        name: '激活的样式-指令',
        url: '/difficulty/active-style'
      },
      {
        name: '实现简易版`v-model`指令',
        url: '/difficulty/custom-model'
      }
    ]
  }
])
</script>

<style lang="scss" scoped>
.page {
  width: 60vw;
  padding: 20px 40px;

  h1 {
    font-weight: bold;
    font-size: 32px;
  }

  .list {
    margin-top: 10px;

    .title {
      font-weight: bold;
      font-size: 20px;
    }

    .item {
      padding-left: 10px;
      display: flex;
      flex-wrap: wrap;

      a {
        cursor: pointer;
        margin-right: 5px;
        margin-bottom: 5px;
        background-color: #42b883;
        color: #fff;
        border-radius: 4px;
        display: inline-flex;
        border: 1px solid transparent;
        padding: 6px;
        text-decoration: none;
      }
    }
  }
}
</style>